<style lang=less>
	@import '../../../assets/public.less';
	@import './moneyRecord.less';
</style>
<template>
	<div class="money_record_wrapper">
		<HeaDer></HeaDer>
		<div class="money_record_container">
			<el-card class="box-card title">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/MyAssets' }">{{$t("moneyRecord.list[0]")}}</el-breadcrumb-item><!-- 资产 -->
					<el-breadcrumb-item>{{$t("moneyRecord.list[1]")}}</el-breadcrumb-item><!-- 财务记录 -->
				</el-breadcrumb>
			</el-card>
			<!--  交易记录 -->
			<!--<el-card class="box-card record_zuixin">
				<el-tabs v-model="activeName1">
					<el-tab-pane label="交易记录" name="first">
						<el-table :data="dealData" style="width: 100%" height="288">
							<el-table-column prop="addtime" label="时间">
								<template slot-scope="scope">
									<div>{{ $public.timestampToTime(scope.row.addtime) }}</div>
								</template>
							</el-table-column>
							<el-table-column prop="cat" label="币种">
							</el-table-column>
							<el-table-column prop="type" label="类型">
							</el-table-column>
							<el-table-column prop="price" label="数量">
							</el-table-column>
							<el-table-column prop="state" label="状态" width="150">
								<template slot-scope="scope">
									<div v-if="scope.row.state == 1">已结算</div>
									<div v-else>未结算</div>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
					<el-pagination
						@current-change="handleCurrentChange" 
						layout="prev,pager, next" 
						prev-text="上一页" 
						next-text="下一页" 
						:page-size="5"
						background
						:total="JYtotal">
					</el-pagination>
				</el-tabs>
			</el-card>-->

			<!-- 充币、提币 -->
			<el-card class="box-card record_list">
				<el-tabs v-model="activeNumber" @tab-click="handleClick2">
					<el-tab-pane :label='$t("moneyRecord.list[2]")' name="chongBit"><!-- 充币记录 -->
						<table class="table" v-loading="loading">
							<tr>
								<td class="tb_url">{{$t("moneyRecord.titips[0]")}}</td><!-- 充币地址 -->
								<th>{{$t("moneyRecord.titips[1]")}}</th><!-- 提交时间 -->
								<th>{{$t("moneyRecord.titips[2]")}}</th><!-- 审核时间 -->
								<th>{{$t("moneyRecord.titips[3]")}}</th><!-- 提币数量 -->
								<th>{{$t("moneyRecord.titips[4]")}}</th><!-- 状态 -->
							</tr>
							<tr v-for="(todo,index) in recordData1.res" :key="index">
								<td class="tb_url">{{todo.chongzhi_url}}</td>
								<td>{{ $public.timestampToTime(todo.addtime) }}</td>
								<td v-if="todo.check_time">{{ $public.timestampToTime(todo.check_time) }}</td>
								<td v-else> --</td>
								<td>{{ todo.price }}</td>
								<!--// 1 待审核 2到账中 3已拒绝 4已到账-->
								<td v-if="todo.state == 1">{{$t("moneyRecord.status1[0]")}}</td><!-- 待审核 -->
								<td v-else-if="todo.state == 2">{{$t("moneyRecord.status1[3]")}}</td><!-- 到账中 -->
								<td v-else-if = "todo.state == 3">{{$t("moneyRecord.status1[2]")}}</td><!-- 已拒绝 -->
								<td v-else-if = "todo.state == 4">{{$t("moneyRecord.status1[1]")}}</td><!-- 已到账 -->
								<td v-else>--</td>
							</tr>
						</table>
					</el-tab-pane>
					<el-tab-pane :label='$t("moneyRecord.list[3]")' name="tiBit"><!-- 提币记录 -->
						<table class="table" v-loading="loading">
							<tr>
								<td class="tb_url">{{$t("moneyRecord.titips1[0]")}}</td><!-- 提币地址 -->
								<th>{{$t("moneyRecord.titips1[1]")}}</th><!-- 提交时间 -->
								<th>{{$t("moneyRecord.titips1[2]")}}</th><!-- 审核时间 -->
								<th>{{$t("moneyRecord.titips1[3]")}}</th><!-- 提币数量 -->
								<th>{{$t("moneyRecord.titips1[4]")}}</th><!-- 状态 -->
							</tr>
							<tr v-for="(todo,index) in recordData2.res" :key="index">
								<td class="tb_url">{{todo.qianbao_url}}</td>
								<td>{{ $public.timestampToTime(todo.addtime) }}</td>
								<td v-if="todo.check_time">{{ $public.timestampToTime(todo.check_time) }}</td>
								<td v-else> --</td>
								<td>{{ todo.price }}</td>
								
								<td v-if="todo.state == 1">{{$t("moneyRecord.status2[0]")}}</td><!-- 待审核 -->
								<td v-else-if="todo.state == 2">{{$t("moneyRecord.status2[1]")}}</td><!-- 已审核 -->
								<td v-else-if = "todo.state == 3">{{$t("moneyRecord.status2[2]")}}</td><!-- 拒绝 -->
								<td v-else >--</td>
							</tr>
						</table>
					</el-tab-pane>
					<el-tab-pane :label='$t("moneyRecord.list[4]")' name="alse"><!-- 其他 -->
						<table class="table" v-loading="loading">
							<tr>
								<th>{{$t("moneyRecord.rests[0]")}}</th><!-- 时间 -->
								<th>{{$t("moneyRecord.rests[1]")}}</th><!-- 数量 -->
								<th>{{$t("moneyRecord.rests[2]")}}</th><!-- 备注 -->
							</tr>
							<tr v-for="(todo,index) in recordData3.res" :key="index">
								<td>{{ $public.timestampToTime(todo.addtime) }}</td>
								<td>{{ todo.price }}</td>
								<td v-if="todo.type">{{todo.type}} </td>
								<td v-else>{{ todo.memo }}</td>
							</tr>
						</table>
					</el-tab-pane>

					<div v-if="totalPage <= 0" class="notData">{{$t("moneyRecord.data")}}</div><!-- 暂无数据 -->
					<div class="block button_pages" v-if="totalPage > 1">
						<i>{{$t("moneyRecord.page[0]")}} {{ pageNum }} {{$t("moneyRecord.page[0]")}}</i><!-- 第 {{ pageNum }} 页 -->
						<span @click="prevClick" v-if="prevBool">{{$t("moneyRecord.page[2]")}}</span>
						<span @click="nextClick" v-if="nextBool">{{$t("moneyRecord.page[3]")}}</span>
					</div>
				</el-tabs>
			</el-card>
		</div>
		<FooTer></FooTer>
	</div>
</template>
<script>
	// import Header from "../../header/heaer.vue";
	// import Footer from "../../footer/footer.vue";

	export default {
		data() {
			return {
				loading: false,
				prevBool: false,
				nextBool: true,
				pageNum: 1, // 当前页数
				totalPage: null, // 总页数
				// totalNumber: null, // 总条数
				activeName1: 'first',
				activeNumber: 'chongBit',
				dealData: [], // 交易记录jiaoYiData1
				recordData1: [], //  充币
				recordData2: [], // 提币
				recordData3: [], // 其他
				JYPage: 1,
				JYtotal: 100,
				pid: '', //查询需要的条件
			}
		},
		methods: {
			handleCurrentChange(val) {
				var _this = this;
				_this.JYPage = val;
				_this.requestPublic();
			},
			prevClick: function() {
				var _this = this;
				_this.pageNum--;
				if(_this.pageNum <= 1) {
					_this.prevBool = false;
					_this.nextBool = true;
					eval('_this.' + _this.activeNumber + '()');
					return;
				} else {
					_this.nextBool = true;
					eval('_this.' + _this.activeNumber + '()');
				}
			},
			nextClick: function() {
				var _this = this;
				_this.pageNum++;
				if(_this.pageNum >= _this.totalPage) {
					eval('_this.' + _this.activeNumber + '()');
					_this.prevBool = true;
					_this.nextBool = false;
				} else {
					_this.prevBool = true;
					eval('_this.' + _this.activeNumber + '()');
				}
			},
			// 充币记录
			chongBit: function() {
				var _this = this;
				_this.$http.get(_this.$http.moneyDeal, {
						params: {
							type: 'recharge',
							"p": _this.pageNum,
							size: 5,
							pid: _this.pid
						}
					})
					.then((res) => {
						// _this.totalNumber = res.data.data.count;
						if(res.data.status == 200) {
							_this.recordData1 = res.data.data;
							_this.totalPage = Math.ceil(res.data.data.count / res.data.data.size);
							_this.pageNum = res.data.data.p;
						}
						setTimeout(function() {
							_this.loading = false;
						}, 500);
					});
			},
			// 提币记录
			tiBit: function() {
				var _this = this;
				_this.$http.get(_this.$http.moneyDeal, {
						params: {
							type: 'cash',
							"p": _this.pageNum,
							size: 5,
							pid: _this.pid
						}
					})
					.then((res) => {
						// _this.totalNumber = res.data.data.count;
						if(res.data.status == 200) {
							_this.recordData2 = res.data.data;
							_this.totalPage = Math.ceil(res.data.data.count / res.data.data.size);
							_this.pageNum = res.data.data.p;
						}
						setTimeout(function() {
							_this.loading = false;
						}, 500);
					});
			},
			//其他
			alse: function() {
				var _this = this;
				if(_this.pid == undefined) {
					_this.$http.get(_this.$http.caiWu, {
							params: {
								size: 5,
//								p: _this.JYPage
								"p": _this.pageNum,
							}
						})
						.then((res) => {
							if(res.data.status == 200) {
							_this.recordData3 = res.data.data;
							_this.totalPage = Math.ceil(res.data.data.count / res.data.data.size);
							_this.pageNum = res.data.data.p;
						}
						setTimeout(function() {
							_this.loading = false;
						}, 500);
							

						});

					return false;
				}

				_this.$http.get(_this.$http.re_asset, {
						params: {
							"p": _this.pageNum,
							size: 5,
							pid: _this.pid
						}
					})
					.then((res) => {
						// _this.totalNumber = res.data.data.count;
						if(res.data.status == 200) {
							_this.recordData3 = res.data.data;
							_this.totalPage = Math.ceil(res.data.data.count / res.data.data.size);
							_this.pageNum = res.data.data.p;
						}
						setTimeout(function() {
							_this.loading = false;
						}, 500);
					});

			},
			handleClick2(tab, event) {
				var _this = this;
				_this.loading = true;
				_this.pageNum = null;
				_this.recordData1 = '';
				_this.recordData2 = '';
				eval('_this.' + _this.activeNumber + '()');
			},

		},
		created: function() {
			var _this = this;
			window.scrollTo(0, 0); //回到顶部
			_this.pid = this.$route.query.pid;
//			_this.requestPublic();
			_this.chongBit();
		},
		// components: {
		// 	"HeaDer": Header,
		// 	"FooTer": Footer,
		// }
	}
</script>